<template>
	<view class="pages-box rel">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="验证码修改密码" leftIcon="icon-left"
			color="#ffffff" :backgroundColor="primaryColor">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="pl-lg pr-lg fill-base box-cont">
			<view class="box-item">
				<view class="f-title pb-md text-bold">手机号</view>
				<view class="radius-16 fill-body h-110 pl-lg pr-lg flex-center">
					<input class="f-title h-110 flex-1" type="number" placeholder="请输入手机号" />
				</view>
			</view>
			<view class="box-item">
				<view class="f-title pb-md text-bold">验证码</view>
				<view class="radius-16 fill-body h-110 pl-lg pr-lg flex-center">
					<input class="f-title h-110 flex-1" type="text" placeholder="请输入验证码" />
					<text class="f-title h-110 flex-center" :style="{color: primaryColor}">获取验证码</text>
				</view>
			</view>
			<view class="box-item">
				<view class="f-title pb-md text-bold">新密码</view>
				<view class="radius-16 fill-body h-110 pl-lg pr-lg flex-center">
					<input class="f-title h-110 flex-1" type="text" placeholder="英文字母+数字不超过12位" />
				</view>
			</view>
			<view class="box-item">
				<view class="f-title pb-md text-bold">确认密码</view>
				<view class="radius-16 fill-body h-110 pl-lg pr-lg flex-center">
					<input class="f-title h-110 flex-1" type="text" placeholder="英文字母+数字不超过12位" />
				</view>
			</view>
			<view class="f-title box-tips text-right" :style="{color: primaryColor}" @tap="$util.goUrl({url: `/user/pages/modify-pw-verify`})">使用验证码修改密码</view>
		</view>
		
		
		<view class="space-max-footer"></view>
				
		<fix-bottom-button @confirm="submit" borderRadius="8rpx" :text="[{text:'确认',type:'confirm',isAuth:false}]" bgColor="#fff">
		</fix-bottom-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import tabbar from "@/components/tabbar.vue"
	
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.initIndex()
		},
		async onShow() {},
		async onReachBottom() {},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					this.getConfigInfo()
				}
			}
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.box-cont{
			padding-bottom: 200rpx;
		}
		.box-item{
			padding-top: 44rpx;
		}
		.box-tips{
			padding-top: 55rpx;
		}
	}
</style>
